<template>
  <!-- 1. 准备具备宽高的DOM容器 -->
  <div id="container"></div>
  <!-- 2. 在 index.html 引入百度地图js文件 -->
</template>

<script lang="ts" setup>
defineOptions({
  name: "App",
});

const BMapGL = window.BMapGL;

import { onMounted } from "vue";

onMounted(async () => {
  // 3. 创建地图实例
  // 但我们引入百度地图js文件，全局多了一个对象：BMapGL
  const map = new BMapGL.Map("container");

  // 4. 设置地图中心点坐标
  const point = new BMapGL.Point(116, 30);

  // map.setMapType(BMAP_EARTH_MAP); // 地球模式
  // map.setMapType(BMAP_SATELLITE_MAP); // 普通卫星地图

  const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
  map.addControl(cityCtrl);

  // 5. 渲染地图
  map.centerAndZoom(point, 10);

  // 获取地理位置（浏览器定位）
  // const geolocation = new BMapGL.Geolocation();
  // geolocation.getCurrentPosition(function (r) {
  //   console.log(r);
  // });

  // ip定位
  // function myFun(result) {
  //   console.log(result);
  //   const cityName = result.name;
  //   map.setCenter(cityName);
  //   // alert("当前定位城市:" + cityName);
  // }
  // var myCity = new BMapGL.LocalCity();
  // myCity.get(myFun);
  // map.setCenter("上海市");

  // 正&逆地址解析
  // 正地址解析：城市信息 -> 经纬度
  // 逆地址解析：经纬度 -> 城市信息

  // 正地址解析：城市信息 -> 经纬度
  // const myGeo = new BMapGL.Geocoder();
  // // 将地址解析结果显示在地图上，并调整地图视野
  // myGeo.getPoint(
  //   "武汉市洪山区茅店山西路天颐科技园",
  //   function (point) {
  //     console.log(point);
  //     map.centerAndZoom(point, 18);
  //   },
  //   "武汉市"
  // );

  /*
    lat: 30.470496454058388
    lng: 114.40529242621102
  */

  // 逆地址解析
  // 创建地理编码实例
  // var myGeo = new BMapGL.Geocoder();
  // const aPoint = new BMapGL.Point(114.40529242621102, 30.470496454058388);
  // // 根据坐标得到地址描述
  // myGeo.getLocation(aPoint, function (result) {
  //   if (result) {
  //     console.log(result);
  //   }
  // });

  // let p1, p2;

  function resolveAddress(fullAddress: string, city: string) {
    return new Promise((resolve) => {
      const myGeo = new BMapGL.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(
        fullAddress,
        function (point: any) {
          resolve(point);
        },
        city
      );
    });
  }

  // const myGeo = new BMapGL.Geocoder();
  // // 将地址解析结果显示在地图上，并调整地图视野
  // myGeo.getPoint(
  //   "武汉市江夏区茅店山西路天颐科技园",
  //   function (point) {
  //     p1 = point;
  //   },
  //   "武汉市"
  // );

  // myGeo.getPoint(
  //   "武汉市东湖",
  //   function (point) {
  //     p2 = point;
  //   },
  //   "武汉市"
  // );
  // https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/routeplan
  let [p1, p2] = await Promise.all([
    resolveAddress("武汉市江夏区茅店山西路天颐科技园", "武汉市"),
    resolveAddress("武汉市武昌区东湖生态旅游风景区", "武汉市"),
  ]);

  p1 = new BMapGL.Point(p1.lng, p1.lat);
  p2 = new BMapGL.Point(p2.lng, p2.lat);

  var driving = new BMapGL.DrivingRoute(map, {
    renderOptions: { map: map, autoViewport: true },
  });
  driving.search(p1, p2);
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  height: calc(100vh - 20px);
}
</style>

<style>
.BMap_cpyCtrl.anchorBL {
  display: none;
}
</style>
